package com.fishingwithme.android.ui.screens.home

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Checkbox
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.ExposedDropdownMenuDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavController
import com.fishingwithme.android.R
import com.fishingwithme.android.data.model.ApproveRuleItem
import com.fishingwithme.android.data.model.City
import com.fishingwithme.android.data.model.SpotDetail
import com.fishingwithme.android.navigation.FishingNavigation
import com.fishingwithme.android.ui.components.MultiImageDisplay
import com.fishingwithme.android.ui.screens.anybitting.SwitchHandler
import com.fishingwithme.android.ui.screens.map.SideBar
import com.fishingwithme.android.ui.screens.map.SideBarItem
import com.fishingwithme.android.ui.screens.my.MyScreenHiltEntryPoint
import com.fishingwithme.android.ui.theme.AppDimensions
import com.fishingwithme.android.ui.viewmodels.AuditViewModel
import com.fishingwithme.android.ui.viewmodels.HomeViewModel
import dagger.hilt.android.EntryPointAccessors
import kotlinx.coroutines.launch


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen(
    navController: NavController,
    id: String,
    approve: String = "",
    viewModel: HomeViewModel = hiltViewModel(),
    auditViewModel: AuditViewModel = hiltViewModel()  // Add AuditViewModel
) {
    val uiState by viewModel.uiState.collectAsState()
    val context = LocalContext.current
    val preferencesManager = EntryPointAccessors.fromApplication(
        context.applicationContext,
        MyScreenHiltEntryPoint::class.java
    ).preferencesManager()

    // Get user data
    val user by preferencesManager.getLoginUserObj().collectAsState(initial = null)

    LaunchedEffect(Unit) {
        viewModel.loadSpotDetails(id)
    }

    val baseBarItems = remember {
        mutableListOf(
            SideBarItem(
                key = "go_fishing_nav",
                icon = R.mipmap.go,
                handler = SwitchHandler("go_fishing_nav", R.mipmap.go)
            ),
            SideBarItem(
                key = "show_harvests",
                icon = R.mipmap.fishes,
                handler = SwitchHandler("show_harvests", R.mipmap.fishes)
            ),
            SideBarItem(
                key = "show_harvest",
                icon = R.mipmap.fishing,
                handler = SwitchHandler("show_harvest", R.mipmap.fishing)
            ),
            SideBarItem(
                key = "update_spot",
                icon = R.mipmap.correct,
                handler = SwitchHandler("update_spot", R.mipmap.correct)
            )
        )
    }

    // Initialize barItems after user data is available and spot details are loaded
    val barItems = remember(user, uiState.spotDetail, approve) {
        val items = baseBarItems.toMutableList()
        if (approve == "1") {
            items.add(
                SideBarItem(
                    key = "approve",
                    icon = R.mipmap.approve,
                    handler = SwitchHandler("approve", R.mipmap.approve)
                )
            )
        }
        // Fix: Add the collect_spot item to the list if the condition is met
        if (user?.id != uiState.spotDetail?.createdBy) {
            items.add(
                SideBarItem(
                    key = "collect_spot",
                    icon = R.mipmap.coll,
                    handler = SwitchHandler("collect_spot", R.mipmap.coll)
                )
            )
        }
        items
    }

    // State for approval bottom sheet
    var showApprovalSheet by remember { mutableStateOf(false) }
    val selectedCities = remember { mutableStateListOf<City>() }
    var isApproved by remember { mutableStateOf(true) }
    var searchQuery by remember { mutableStateOf("") }
    val searchResults = remember { mutableStateListOf<City>() }
    var isSearching by remember { mutableStateOf(false) }
    var selectedReason by remember { mutableStateOf<ApproveRuleItem?>(null) } // Add selectedReason state

    // Initialize with spot's city if available
    LaunchedEffect(uiState.spotDetail) {
        uiState.spotDetail?.cityCode?.let { cityCode ->
            if (cityCode.isNotEmpty()) {
                // Create a city object with the spot's city code
                val spotCity = City(cityCode, "默认当前钓点城市")
                if (!selectedCities.contains(spotCity)) {
                    selectedCities.add(spotCity)
                }
            }
        }
    }

    // Approval Bottom Sheet
    if (showApprovalSheet) {
        val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
        val coroutineScope = rememberCoroutineScope()

        ModalBottomSheet(
            onDismissRequest = { showApprovalSheet = false },
            sheetState = sheetState,
            modifier = Modifier.fillMaxHeight()
        ) {
            ApprovalContent(
                selectedCities = selectedCities,
                isApproved = isApproved,
                searchQuery = searchQuery,
                searchResults = searchResults,
                isSearching = isSearching,
                onSearchQueryChange = { query ->
                    searchQuery = query
                    // Call the ViewModel's searchCities method
                    if (query.isNotEmpty()) {
                        isSearching = true
                        viewModel.searchCities(query) { cities ->
                            searchResults.clear()
                            searchResults.addAll(cities)
                            isSearching = false
                        }
                    } else {
                        searchResults.clear()
                    }
                },
                onCitySelected = { city ->
                    if (!selectedCities.contains(city)) {
                        selectedCities.add(city)
                    }
                },
                onCityRemoved = { city ->
                    selectedCities.remove(city)
                },
                onApprovalChanged = { isApproved = it },
                onSubmit = { ruleItemId, reason ->
                    // Handle submission logic here using AuditViewModel
                    val spotId = uiState.spotDetail?.spotId?.toLongOrNull()
                    if (spotId != null) {
                        val channels = selectedCities.map { it.cityCode }

                        auditViewModel.auditSpot(
                            bizId = spotId,
                            ruleItemId = ruleItemId,
                            reason = reason,
                            state = isApproved,
                            channels = channels,
                            onSuccess = {
                                // Handle success - maybe show a toast or notification
                                coroutineScope.launch {
                                    sheetState.hide()
                                }.invokeOnCompletion {
                                    showApprovalSheet = false
                                }
                            },
                            onError = { errorMessage ->
                                // Handle error - maybe show a toast or error message
                                println("Audit failed: $errorMessage")
                            }
                        )
                    } else {
                        // Handle invalid spot ID
                        coroutineScope.launch {
                            sheetState.hide()
                        }.invokeOnCompletion {
                            showApprovalSheet = false
                        }
                    }
                },
                onCancel = {
                    coroutineScope.launch {
                        sheetState.hide()
                    }.invokeOnCompletion {
                        showApprovalSheet = false
                    }
                },
                rulesItems = uiState.rulesItems,
                isRulesLoading = uiState.isRulesLoading,
                onLoadRulesItems = { viewModel.loadRulesItems(1) },
                selectedReason = selectedReason, // Pass selectedReason to ApprovalContent
                onReasonSelected = { reason -> selectedReason = reason } // Handle reason selection
            )
        }
    }

    Scaffold { paddingValues ->
        SideBar(
            barItems = barItems,
            onItemClick = { handler ->
                var router: String? = null
                when (handler.key) {
                    "go_fishing_nav" -> {
                        router =
                            "${FishingNavigation.NAVIGATOR}?id=${uiState.spotDetail!!.spotId}&moduleKey=spot"
                    }
                    "show_harvests" -> {
                        router =
                            "${FishingNavigation.HARVEST_LIST}?spotId=${uiState.spotDetail!!.spotId}"
                    }
                    "show_harvest" -> {
                        router =
                            "${FishingNavigation.HARVEST_FROM_SPOT}?spotId=${uiState.spotDetail!!.spotId}"
                    }
                    "update_spot" -> {
                        router =
                            "${FishingNavigation.UPDATE_SPOT}?id=${uiState.spotDetail!!.spotId}"
                    }

                    "collect_spot" -> {
                        viewModel.collectSpot(uiState.spotDetail!!.spotId)
                    }
                    "approve" -> {
                        // Show the approval bottom sheet
                        showApprovalSheet = true
                    }
                }

                if (router != null) {
                    navController.navigate(router)
                }
            }
        )
        // 使用Box作为容器，允许浮动按钮叠加在内容之上
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(AppDimensions.SPACING_2)
        ) {
            when {
                uiState.isLoading -> {
                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(paddingValues),
                        contentAlignment = Alignment.Center
                    ) {
                        CircularProgressIndicator()
                    }
                }

                uiState.spotDetail != null -> {
                    LazyColumn(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(paddingValues)
                            .padding(horizontal = AppDimensions.SPACING_16),
                        verticalArrangement = Arrangement.spacedBy(AppDimensions.SPACING_16)
                    ) {
                        // Spot Details Card
                        item {
                            SpotDetailsCard(
                                spotDetail = uiState.spotDetail!!

                            )
                        }

                    }
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ApprovalContent(
    selectedCities: SnapshotStateList<City>,
    isApproved: Boolean,
    searchQuery: String,
    searchResults: SnapshotStateList<City>,
    isSearching: Boolean,
    onSearchQueryChange: (String) -> Unit,
    onCitySelected: (City) -> Unit,
    onCityRemoved: (City) -> Unit,
    onApprovalChanged: (Boolean) -> Unit,
    onSubmit: (ruleItemId: Long, reason: String) -> Unit, // Update onSubmit signature
    onCancel: () -> Unit,
    rulesItems: List<ApproveRuleItem> = emptyList(),
    isRulesLoading: Boolean = false,
    onLoadRulesItems: () -> Unit = {},
    selectedReason: ApproveRuleItem? = null,
    onReasonSelected: (ApproveRuleItem) -> Unit = {}
) {
    // State for reason selection when rejected
    var showReasonDropdown by remember { mutableStateOf(false) }

    // When approval status changes, load rules if rejected
    LaunchedEffect(isApproved) {
        if (!isApproved) {
            onLoadRulesItems()
        }
    }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(AppDimensions.SPACING_16)
            .verticalScroll(rememberScrollState())
    ) {
        // Title
        Text(
            text = stringResource(R.string.approval),
            style = MaterialTheme.typography.headlineSmall,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = AppDimensions.SPACING_16)
        )

        // Search input for cities
        OutlinedTextField(
            value = searchQuery,
            onValueChange = onSearchQueryChange,
            label = { Text(stringResource(R.string.search_cities)) },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.Search,
                    contentDescription = stringResource(R.string.search)
                )
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = AppDimensions.SPACING_16)
        )

        // Selected cities list
        Text(
            text = stringResource(R.string.selected_cities),
            style = MaterialTheme.typography.titleMedium,
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = AppDimensions.SPACING_8)
        )

        if (selectedCities.isEmpty()) {
            Text(
                text = stringResource(R.string.no_cities_selected),
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = AppDimensions.SPACING_16)
            )
        } else {
            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = AppDimensions.SPACING_16)
                    .heightIn(max = 150.dp)
            ) {
                items(selectedCities) { city ->
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(vertical = AppDimensions.SPACING_4),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Text(
                            text = city.city ?: stringResource(R.string.unknown_city_name),
                            style = MaterialTheme.typography.bodyLarge,
                            modifier = Modifier.weight(1f)
                        )
                        IconButton(onClick = { onCityRemoved(city) }) {
                            Icon(
                                imageVector = Icons.Default.Close,
                                contentDescription = stringResource(R.string.remove)
                            )
                        }
                    }
                }
            }
        }

        // Search results
        if (isSearching) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = AppDimensions.SPACING_16),
                contentAlignment = Alignment.Center
            ) {
                CircularProgressIndicator()
            }
        } else if (searchResults.isNotEmpty()) {
            Text(
                text = stringResource(R.string.search_results),
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = AppDimensions.SPACING_8)
            )
            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = AppDimensions.SPACING_16)
                    .heightIn(max = 200.dp)
            ) {
                items(searchResults) { city ->
                    Card(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(vertical = AppDimensions.SPACING_2),
                        onClick = { onCitySelected(city) },
                        colors = CardDefaults.cardColors(
                            containerColor = MaterialTheme.colorScheme.surface
                        )
                    ) {
                        Text(
                            text = city.city ?: stringResource(R.string.unknown_city_name),
                            style = MaterialTheme.typography.bodyLarge,
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(AppDimensions.SPACING_16)
                        )
                    }
                }
            }
        }

        // Approval checkbox
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = AppDimensions.SPACING_16),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Checkbox(
                checked = isApproved,
                onCheckedChange = onApprovalChanged
            )
            Spacer(modifier = Modifier.width(AppDimensions.SPACING_8))
            Text(
                text = if (isApproved) stringResource(R.string.approved) else stringResource(R.string.rejected),
                style = MaterialTheme.typography.bodyLarge
            )
        }

        // Reason selection dropdown when rejected
        if (!isApproved) {
            if (isRulesLoading) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = AppDimensions.SPACING_16),
                    contentAlignment = Alignment.Center
                ) {
                    CircularProgressIndicator()
                }
            } else if (rulesItems.isNotEmpty()) {
                ExposedDropdownMenuBox(
                    expanded = showReasonDropdown,
                    onExpandedChange = { showReasonDropdown = it },
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = AppDimensions.SPACING_16)
                ) {
                    OutlinedTextField(
                        modifier = Modifier
                            .fillMaxWidth()
                            .menuAnchor(),
                        readOnly = true,
                        value = selectedReason?.name ?: stringResource(R.string.select_reason),
                        onValueChange = {},
                        label = { Text(stringResource(R.string.reason_for_rejection)) },
                        trailingIcon = {
                            ExposedDropdownMenuDefaults.TrailingIcon(expanded = showReasonDropdown)
                        }
                    )
                    ExposedDropdownMenu(
                        expanded = showReasonDropdown,
                        onDismissRequest = { showReasonDropdown = false }
                    ) {
                        rulesItems.forEach { rule ->
                            DropdownMenuItem(
                                text = { Text(rule.name) },
                                onClick = {
                                    onReasonSelected(rule)
                                    showReasonDropdown = false
                                }
                            )
                        }
                    }
                }
            }
        }

        // Action buttons
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = AppDimensions.SPACING_16),
            horizontalArrangement = Arrangement.End
        ) {
            TextButton(onClick = onCancel) {
                Text(stringResource(R.string.cancel))
            }
            Spacer(modifier = Modifier.width(AppDimensions.SPACING_8))
            TextButton(
                onClick = {
                    // Pass the rule item ID and reason to the onSubmit callback
                    if (isApproved) {
                        // For approved items, use default values
                        onSubmit(1L, "Approved")
                    } else {
                        // For rejected items, use the selected reason
                        val ruleItemId = selectedReason?.id?.toLongOrNull() ?: 1L
                        val reason = selectedReason?.name ?: "Rejected"
                        onSubmit(ruleItemId, reason)
                    }
                },
                enabled = selectedCities.isNotEmpty()
            ) {
                Text(stringResource(R.string.submit))
            }
        }

        // Add some bottom padding to ensure buttons are visible
        Spacer(modifier = Modifier.height(AppDimensions.SPACING_16))
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SpotDetailsCard(
    spotDetail: SpotDetail
) {
    // 图片卡片 - 独立显示
    if (spotDetail.jsonPics.isNotEmpty()) {
        Card(
            modifier = Modifier.fillMaxWidth(),
            elevation = CardDefaults.cardElevation(defaultElevation = AppDimensions.CARD_ELEVATION_2)
        ) {
            MultiImageDisplay(
                pictures = spotDetail.jsonPics.map { it.trim('"') },
                modifier = Modifier
                    .fillMaxWidth()
            )
        }

        // Add spacing between image card and name
        Spacer(modifier = Modifier.height(AppDimensions.SPACING_16))
    }

    // 名称卡片 - 独立显示
    Card(
        modifier = Modifier.fillMaxWidth(),
        elevation = CardDefaults.cardElevation(defaultElevation = AppDimensions.CARD_ELEVATION_2)
    ) {
        Text(
            text = spotDetail.name,
            style = MaterialTheme.typography.headlineSmall,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .fillMaxWidth()
                .padding(AppDimensions.SPACING_16)
        )
    }

    Spacer(modifier = Modifier.height(AppDimensions.SPACING_16))

    // 属性信息卡片
    Card(
        modifier = Modifier.fillMaxWidth(),
        elevation = CardDefaults.cardElevation(defaultElevation = AppDimensions.CARD_ELEVATION_2)
    ) {
        Column(
            modifier = Modifier.padding(AppDimensions.SPACING_16)
        ) {
            // 属性信息
            Column(
                modifier = Modifier.fillMaxWidth(),
                verticalArrangement = Arrangement.spacedBy(AppDimensions.SPACING_4)
            ) {
                // 水类型
                Row {
                    Text(
                        text = "水域类型: ",
                        style = MaterialTheme.typography.bodyMedium,
                        fontWeight = FontWeight.Bold
                    )
                    Text(
                        text = spotDetail.waterType.name,
                        style = MaterialTheme.typography.bodyMedium
                    )
                }

                // 距离
                Row {
                    Text(
                        text = "距离: ",
                        style = MaterialTheme.typography.bodyMedium,
                        fontWeight = FontWeight.Bold
                    )
                    Text(
                        text = spotDetail.distance.name,
                        style = MaterialTheme.typography.bodyMedium
                    )
                }

                // 难度等级
                Row {
                    Text(
                        text = "难度等级: ",
                        style = MaterialTheme.typography.bodyMedium,
                        fontWeight = FontWeight.Bold
                    )
                    Text(
                        text = spotDetail.lvl.name,
                        style = MaterialTheme.typography.bodyMedium
                    )
                }

                // 鱼类
                if (spotDetail.jsonFishTypes.isNotEmpty()) {
                    Row {
                        Text(
                            text = "可钓鱼种: ",
                            style = MaterialTheme.typography.bodyMedium,
                            fontWeight = FontWeight.Bold
                        )
                        Text(
                            text = spotDetail.jsonFishTypes.joinToString { it.name },
                            style = MaterialTheme.typography.bodyMedium
                        )
                    }
                }

                // 钓点类型
                if (spotDetail.jsonSpotTypes.isNotEmpty()) {
                    Row {
                        Text(
                            text = "钓点类型: ",
                            style = MaterialTheme.typography.bodyMedium,
                            fontWeight = FontWeight.Bold
                        )
                        Text(
                            text = spotDetail.jsonSpotTypes.joinToString { it.name },
                            style = MaterialTheme.typography.bodyMedium
                        )
                    }
                }

                Spacer(modifier = Modifier.height(AppDimensions.SPACING_8))

                // 收费信息
                if (spotDetail.isFree == 0) {
                    Text(
                        text = stringResource(R.string.free_spot),
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.primary
                    )
                } else {
                    Text(
                        text = stringResource(R.string.paid_spot),
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.secondary
                    )
                }

                // 私密性
                if (spotDetail.isPrivate == 1) {
                    Text(
                        text = stringResource(R.string.public_spot),
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.tertiary
                    )
                } else {
                    Text(
                        text = stringResource(R.string.private_spot),
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.tertiary
                    )
                }
                if (spotDetail.isForbidden == 1) {
                    Text(
                        text = stringResource(R.string.forbidden_fishing),
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.tertiary
                    )
                }
            }
        }
    }

    // 在属性信息卡片和描述卡片之间添加间距
    Spacer(modifier = Modifier.height(AppDimensions.SPACING_16))

    // 描述卡片 - 独立显示
    if (spotDetail.description.isNotEmpty()) {
        Card(
            modifier = Modifier.fillMaxWidth(),
            elevation = CardDefaults.cardElevation(defaultElevation = AppDimensions.CARD_ELEVATION_2)
        ) {
            Column(
                modifier = Modifier.padding(AppDimensions.SPACING_16)
            ) {
                Text(
                    text = stringResource(R.string.spot_description),
                    style = MaterialTheme.typography.titleMedium,
                    fontWeight = FontWeight.Bold
                )
                Spacer(modifier = Modifier.height(AppDimensions.SPACING_8))
                Text(
                    text = spotDetail.description,
                    style = MaterialTheme.typography.bodyMedium
                )
            }
        }
    }
    // 添加描述卡片和底部之间的间距
    Spacer(modifier = Modifier.height(AppDimensions.SPACING_24))

}